<template>
  <div>
    <!-- 地址管理 -->
    <Dialog v-model:visible="visible" title="地址管理" width="600px">
      <Form
        v-slot="{
          validate,
          values,
          setFieldError,
        }"
        class="form"
        :validation-schema="schema"
      >
        <div class="field">
          <label for="address"><span class="red">*</span>地址信息：</label>

          <div class="select-v distpicker">
            <VDistpicker
              :province="select.province"
              :city="select.city"
              :area="select.area"
              @province="(event:any)=>onChange(event,'province')"
              @city="(event:any)=>onChange(event,'city')"
              @area="(event:any)=>onChange(event,'area')"
            />

            <ErrorMessage name="address" class="errorMsg" />
          </div>
        </div>
        <div class="field">
          <label for="full_address"><span class="red">*</span>详细地址：</label>
          <Field
            name="full_address"
            class="input"
            as="textarea"
            placeholder="请输入详细地址信息，如道路、门牌号、小区、 楼栋号、单元等信息"
          />
          <ErrorMessage name="full_address" class="errorMsg" />
        </div>
        <div class="field">
          <label for="mail">邮政编码：</label>
          <Field name="mail" class="input" placeholder="请填写邮编" />
          <ErrorMessage name="confirm_password" class="errorMsg" />
        </div>
        <div class="field">
          <label for="consignee"><span class="red">*</span>收货人姓名：</label>
          <Field
            name="consignee"
            class="input"
            placeholder="长度不超过25个字符"
          />
          <ErrorMessage name="consignee" class="errorMsg" />
        </div>

        <div class="field">
          <label for="phone"><span class="red">*</span>手机号码：</label>
          <Field name="phone" placeholder="请输入您的手机号码" class="input" />
          <ErrorMessage name="phone" class="errorMsg" />
        </div>

        <div class="checkbox">
          <label for="default"></label>
          <Field
            v-slot="{ field }"
            name="default"
            type="checkbox"
            :value="false"
          >
          <input type="checkbox"  class="checkbox-input thumb" v-bind="field" :value="false" />
           <span  class="set-default">设置为默认收货地址</span>

          </Field>
        </div>

        <Button
          class="button thumb"
          color="white"
          background="#232481"
          size=".0833rem"
          @click="() => save(values, validate, setFieldError)"
          >保存</Button
        >
      </Form>

      <!-- 地址 -->
    </Dialog>
  </div>
</template>
<script setup lang="ts" name="">
import { ref, watch, reactive } from "vue";
import Dialog from "@/components/Dialog/index.vue";
import { validateRule } from "@/utils/util";
import * as yup from "yup";
import { Form, Field, ErrorMessage } from "vee-validate";
import Button from "@/components/Button/index.vue";
import VDistpicker from "v-distpicker";
import { toast } from "vue3-toastify";
interface Props {
  show: boolean;
}
const select = reactive<{
  province: string;
  city: string;
  area: string;
}>({ province: "", city: "", area: "" });

const props = withDefaults(defineProps<Props>(), {
  show: false,
});

const emits = defineEmits<{
  (event: "update:show", value: boolean): void;
}>();
watch(
  () => props.show,
  (newValue) => {
    visible.value = newValue;
  }
);

const visible = ref<boolean>(props.show);

watch(
  () => visible.value,
  (newValue) => {
    emits("update:show", newValue);
  }
);

function onChange(
  data: {
    value: string;
    code: string;
  },
  key: "province" | "area" | "city"
) {
  select[key] = data.code === "" ? "" : data.value;
}
const schema = yup.object().shape({
  //   address: yup.oneof(.shape({
  //     province:yup.string().required('请选择省份') ,
  //     city:yup.string().required('请选择城市'),
  //     area:yup.string().required('请选择区域')
  //    }),
  address: yup.mixed(),
  full_address: yup
    .string()
    .required("详细地址不为空")
    .max(20, "最多为255个字符"),
  mail: yup.string().max(255, "最多为255个字符"),
  consignee: yup
    .string()
    .required("收货人姓名不为空")

    .max(25, "长度不超过25个字符"),
  phone: yup
    .string()
    .required("手机号码不为空")
    .matches(validateRule(`phone`), "请输入正确的手机号"),
});

const save = async (values: any, validate: any, setFieldError: any) => {
  // console.log(values,'values');
  let check: boolean = (await validate()).valid;
  // console.log(await validate());
  console.log(select);
  if (select.province === "") {
    setFieldError("address", "请选择省份");
    check = false;
  } else if (select.city === "") {
    console.log(111);
    setFieldError("address", "请选择市");
    check = false;
  } else if (select.area === "") {
    setFieldError("address", "请选择区");
    check = false;
  } else {
    setFieldError("address", "");
  }
  if (check) {
    toast.success("添加成功");
    visible.value = false;  
  }
};
</script>
<style scoped lang="scss">
@media screen and (min-width: $pc-min-width) {
  @import "./pc.scss";
}
</style>
